/**
 * @class StatusBar
 *
 */

class StatusBar {
  constructor(node) {
    this.node = node
    this.parentDom = document.querySelector(this.node)
    this.statusBarList = {}
    this.itemParams = {
      key: '', // 唯一标识
      icon: '', //图标
      value: '', //数值
      unit: '', //单位
      level: '', //等级
      popupWidth: '180px', //弹出框宽度
      popupList: null //弹出框内容
    }
  }
  //增加item
  addItem(params) {
    let mergeParams = Object.assign({}, this.itemParams, params)
    this.parentDom.appendChild(this.init(mergeParams))
    this.statusBarList[mergeParams.key] = mergeParams
  }
  // 删除item
  removeItem(key) {
    let removeDom = document.querySelector('.status-item-' + key)
    this.parentDom.removeChild(removeDom)
    delete this.statusBarList[key]
  }
  // 更新item
  updateItem(key, params) {
    this.statusBarList[key] = Object.assign({}, this.statusBarList[key], params)
    let updateDom = document.querySelector('.status-item-' + key)
    if (updateDom) {
      updateDom.innerHTML = this.renderDom(this.statusBarList[key])
    }
  }
  init(params) {
    //创建容器盒子
    let itemDom = document.createElement('div')
    itemDom.className = `status-bar-item-wrapper status-item-${params.key}`

    itemDom.innerHTML = this.renderDom(params)

    itemDom.onmouseenter = () => {
      this.mouseEnter(params.key)
    }
    itemDom.onmouseleave = () => {
      this.mouseLeave(params.key)
    }
    itemDom.onclick = () => {
      this.itemClick(params.key)
    }
    return itemDom
  }
  // 渲染dom，包含item、 popup
  renderDom(params) {
    let dom = `<div class="status-bar-item ${
      params.status ? params.status : ''
    } ${params.level ? 'level' + params.level : ''}">`

    //获取item显示内容
    let itemDom = this.renderItem(params)
    dom += itemDom + `</div>`

    //获取弹出框显示内容
    let popupDom = ''
    params.popupList && (popupDom = this.renderPopupDom(params))

    dom += popupDom
    return dom
  }
  //渲染item显示内容
  renderItem(params) {
    const { icon, value, unit } = params
    let dom = ''
    params.icon && (dom += `<i class="platformicon ${icon}"></i>`)
    dom += `<p>${value}${unit}</p>`
    return dom
  }

  //渲染弹出框dom
  renderPopupDom(params) {
    let dom = `<div class="popup-wrapper" style="width: ${params.popupWidth}">
                        <ul class="popup-list">`

    params.popupList &&
      params.popupList.forEach((item, i) => {
        dom += `<li class="popup-list-item">
                        <span class="popup-item-name">${item.name}:</span>
                        <span class="popup-item-value">${item.value}</span>
                    </li>`
      })

    dom =
      dom +
      `</ul>
                        <div class="arrow"></div>
                    </div>`
    return dom
  }
  // 鼠标移入
  mouseEnter(key) {
    this.mouseEnterLeave(key, 'block')
  }
  //鼠标移出
  mouseLeave(key) {
    this.mouseEnterLeave(key, 'none')
  }
  //鼠标移入移出
  mouseEnterLeave(key, flag) {
    let dom = document.querySelector('.status-item-' + key)
    let widthNum = this.statusBarList[key].popupWidth
    let num = widthNum.replace('px', '') - 0
    if (flag == 'block') {
      if (dom.offsetLeft < num) {
        dom.classList.add('right')
      }
    } else {
      dom.classList.remove('right')
    }
    let node = null
    if (this.statusBarList[key].popupList) {
      for (let i = 0; i < dom.childNodes.length; i++) {
        if (dom.childNodes[i].className == 'popup-wrapper') {
          node = dom.childNodes[i]
          node.style.display = flag
          return
        }
      }
    }
  }
  // 点击
  itemClick(params) {}
  //销毁
  destory() {
    this.parentDom.innerHTML = ''
  }
}

export default StatusBar
